import React, { Component } from "react";
import axios from "../../utils/axios";
// 引入全部频道标签栏
import LabelBar from "./LabelBar";

import { connect } from "react-redux";
import "./Home1.scss";

import {List} from 'react-virtualized';
const list = [
    '1',
    // And so on...
  ];
  
class Home1 extends Component {

     async rowRenderer({
        index, // Index of row
        isScrolling, // The List is currently being scrolled
        isVisible, // This row is visible within the List (eg it is not an overscanned row)
        key, // Unique key within array of rendered rows
        parent, // Reference to the parent List (instance)
        style, // Style object to be applied to row (to position it);
        // This must be passed through to the rendered row element.
      }) {
        // const user = list[index];
      
        // If row content is complex, consider rendering a light-weight placeholder while scrolling.
        
        
    //  let res= await  axios
    //   .get(
    //     "item/list.json?__timestamp=1598345634394&categoryId=1043000"
    //   )
    //   console.log(res);
      let content = '123' ;
    //   content=Array.from(res.data.data.categoryItemList)
    //   console.log(content);
    //   .then((res) => {
    //     content=Array.from(res.data.data.categoryItemList)
        
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
        // Style is required since it specifies how the row is to be sized and positioned.
        // React Virtualized depends on this sizing/positioning for proper scrolling behavior.
        // By default, the List component provides following style properties:
        //    position
        //    left
        //    top
        //    height
        //    width
        // You can add additional class names or style properties as you would like.
        // Key is also required by React to more efficiently manage the array of rows.
        return (
          <div key={key} style={style}>
              {content}
             {/* {content.map((v, i) => (
          <div key={i} className="allList">
            <h2>{v.category.name}</h2>
            <h3>{v.category.frontName}</h3>
            {v.itemList.map((value, index) => (
              <section key={index}>
                <img src={value.listPicUrl}></img>
                <p>{value.name}</p>
                <span>￥{value.retailPrice}</span>
              </section>
            ))}
            <i></i>
          </div>
        ))} */}
          </div>
        );
      }

  constructor(props) {
    super(props);
    this.state = {
      ListArray: [],
    };
  }
//   componentWillReceiveProps(nextProps) {
//     window.location.reload()
//     // console.log(nextProps);
//     axios
//       .get(
//         "item/list.json?__timestamp=1598345634394&categoryId=" + nextProps.id
//       )
//       .then((res) => {
//         this.setState({
//           ListArray: Array.from(res.data.data.categoryItemList),
//         });
//         console.log(this.state.ListArray);
//       })
//       .catch((err) => {
//         console.log(err);
//       });
//   }
  render() {
    return (
      <div>
        {/* 标签栏开始 */}
        {/* <LabelBar></LabelBar> */}
        {/* 标签栏结束 */}

        {/* {this.state.ListArray.map((v, i) => (
          <div key={i} className="allList">
            <h2>{v.category.name}</h2>
            <h3>{v.category.frontName}</h3>
            {v.itemList.map((value, index) => (
              <section key={index}>
                <img src={value.listPicUrl}></img>
                <p>{value.name}</p>
                <span>￥{value.retailPrice}</span>
              </section>
            ))}
            <i></i>
          </div>
        ))} */}

        <List
            width={300}
            height={300}
            rowCount={list.length}
            rowHeight={20}
            rowRenderer={this.rowRenderer}
        />
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    id: state.getIn(["home", "id"]),
  };
};

const MapDispatchToProps = (dispatch) => {
  return {};
};

export default connect(mapStateToProps, MapDispatchToProps)(Home1);
